{% extends 'back/index.html' %}

{% block content %}
    <div class="rt_content">
        <div class="page_title">
            <h2 class="fl">会员详情</h2>
        </div>
        <form action="/user_detail/" class="form-horizontal" method="post" enctype="multipart/form-data">
            <input class="hide" value="{{ user.id }}" name="id">
            <ul class="ulColumn2">
                <li>
                    <span class="item_name" style="width:120px;">上传头像：</span>
                    <label>
                        <input type="file" class="hide" name="Profile" onchange="xmTanUploadImg(this)">
                        <img src="{{ user.user_profile }}" width="120" height="120" class="uploadImg" id="avarimgs"/>
                    </label>
                </li>
                <li>
                    <span class="item_name" style="width:120px;">会员名称：</span>
                    <input type="text" class="textbox textbox_225" name="name" value="{{ user.username }}"
                           placeholder="会员账号..."/>

                </li>
                <li>
                    <span class="item_name" style="width:120px;">登陆密码：</span>
                    <input type="password" class="textbox textbox_225" name="admin" value="{{ user.password }}"
                           placeholder="会员密码..."/>
                </li>
                <li>
                    <span class="item_name" style="width:120px;">会员等级：</span>
                    <select class="select" name="grade" id="grade">
                        <option>选择会员</option>
                        <option value="普通会员">普通会员</option>
                        <option value="高级会员">高级会员</option>
                    </select>
                </li>
                <li>
                    <span class="item_name" style="width:120px;">电子邮箱：</span>
                    <input type="email" class="textbox textbox_225" name="e-mail" value="{{ user.email }}"
                           placeholder="电子邮件地址..."/>
                </li>
                <li>
                    <span class="item_name" style="width:120px;">手机号码：</span>
                    <input type="tel" class="textbox textbox_225" name="phone" value="{{ user.phone }}"
                           placeholder="手机号码..."/>
                </li>
                <li>
                    <span class="item_name" style="width:120px;">用户权限：</span>
                    <select class="select" name="role" id="role">
                        <option>选择权限</option>
                        <option value=0>普通用户</option>
                        <option value=1>管理员</option>
                    </select>
                </li>
{#                <li>#}
{#                    <span class="item_name" style="width:120px;">收货地址：</span>#}
{#                    <select class="select" id="prov" name="prov" onchange="showCity(this)">#}
{#                        <option>选择省份</option>#}
{##}
{#                    </select>#}
{#                    <select class="select" id="city" name="city" onchange="showCountry(this)">#}
{#                        <option>选择城市</option>#}
{##}
{#                    </select>#}
{#                    <select class="select" id="country" name="country" onchange="selectCountry(this)">#}
{#                        <option>选择区/县</option>#}
{##}
{#                    </select>#}
{#                </li>#}
{#                <li>#}
{#                    <span class="item_name" style="width:120px;">详细地址：</span>#}
{#                    <input type="text" class="textbox textbox_295" name="concreteAddress" placeholder="详细地址..."/>#}
{#                </li>#}
            </ul>
            <div class="form-actions">
                <label class="col-md-2 control-label"></label>
                <div class="col-md-4">
                    <button type="button" class="link_btn"
                            style="float: left;margin-right: 12px;margin-bottom:30px"
                            onclick="modify()">修改
                    </button>
                    <button type="submit" class="link_btn" style="float: left">提交</button>
                </div>
            </div>
            <!--<div>-->
            <!--<input type="text" value="" id="addr-show">-->
            <!--</label>-->
            <!--<br/>-->

            <!--&lt;!&ndash;省份选择&ndash;&gt;-->
            <!--<select id="prov" onchange="showCity(this)">-->
            <!--<option>=请选择省份=</option>-->

            <!--</select>-->

            <!--&lt;!&ndash;城市选择&ndash;&gt;-->
            <!--<select id="city" onchange="showCountry(this)">-->
            <!--<option>=请选择城市=</option>-->
            <!--</select>-->

            <!--&lt;!&ndash;县区选择&ndash;&gt;-->
            <!--<select id="country" onchange="selecCountry(this)">-->
            <!--<option>=请选择县区=</option>-->
            <!--</select>-->
            <!--</div>-->

        </form>

    </div>



    {#<script src="/static/back/js/city.js"></script>#}
    {#<script src="/static/back/js/method01.js"></script>#}
    <script type="text/javascript">
        jQuery(document).ready(function () {
            $("input").attr("disabled", "disabled");
            $("select").attr("disabled", "disabled");
            $("textarea").attr("disabled", "disabled");

            //对所有None的input赋空值
            $("input").each(function () {
                if ($(this).val() === "None") {
                    $(this).val("");
                }
            });

            (function select_init() {
                {# 选择框初始化 #}
                var grade = {{ grade|safe }};
                $('#grade').val(grade);

                var role = {{ user.role|safe }};
                $('#role').val(role);

            })();


        });

        function modify() {
            $("input").removeAttr("disabled");
            $("select").removeAttr("disabled");
            $("textarea").removeAttr("disabled");
            $("#pictures").removeClass("hide")
        }

        (function ($) {
            $(window).load(function () {
                $('#drop3').collapse('show');
                $('#3-3').addClass('active');
            });
        })(jQuery);

    </script>

    <script type="text/javascript">//上传头像实时变动浏览
    if (typeof FileReader == 'undefined') {
        document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
        document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
    }

    //选择图片，马上预览
    function xmTanUploadImg(obj) {
        var file = obj.files[0];
        console.log(obj);
        console.log(file);
        console.log("file.size = " + file.size);
        var reader = new FileReader();
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");
            var img = document.getElementById("avarimgs");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        }
        reader.readAsDataURL(file)
    }
    </script>
{% endblock %}
